<template>
	<div class="sys-container">
		<el-dialog v-model="state.isShowDialog" draggable width="769px">
			<template #header>
				<div style="color: #fff">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit />
					</el-icon>
					<span> {{ props.title }} </span>
				</div>
			</template>
			<el-form :model="state.ruleForm" ref="ruleFormRef" size="default" label-width="80px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="Pid" prop='mediaToucherId'
							:rules="[{ required: true, message: '媒体触点不能为空', trigger: 'blur' }]">
							<el-select v-model.trim="state.selectedMediaToucher" value-key="value" placeholder="请选择"
								class="w100" :disabled="props.title === '编辑'" allow-create filterable>
								<el-option v-for='item in state.mediaToucherDict' :key='item.value' :label='item.label'
									:value='item' />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="产品名称" prop='productId'
							:rules="[{ required: true, message: '媒体产品不能为空', trigger: 'blur' }]">
							<el-select v-model.trim="state.selectedProduct" value-key="value" placeholder="请选择" class="w100"
								:disabled="props.title === '编辑'" allow-create filterable>
								<el-option v-for='item in state.productDict' :key='item.value' :label='item.label'
									:value='item' />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="省份" prop="province" :rules="[{ required: true, message: '省份不能为空', trigger: 'blur' }]">
							<el-select v-model.trim="state.ruleForm.province" placeholder="省份" class="w100"
								:disabled="props.title === '编辑'">
								<el-option v-for='item in optionDict.provinceDict' :key='item.value' :label='item.label'
									:value='item.value' />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="屏蔽城市" prop="city">
							<el-input v-model.trim="state.ruleForm.city" placeholder="请输入屏蔽城市"></el-input>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label='日期'>
							<el-date-picker class='w100' v-model.trim='state.DateRange' type='datetimerange'
								range-separator='至' start-placeholder='开始日期' end-placeholder='结束日期' date-format="YYYY/MM/DD"
								time-format="hh:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="状态">
							<el-select v-model="state.ruleForm.status" placeholder="请选择" class="w100">
								<el-option label="启用" :value="1"></el-option>
								<el-option label="停用" :value="2" :disabled="true"></el-option>
								<el-option label="到量" :value="3" ></el-option>
								<el-option label="短期关停" :value="4"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="互斥周期" prop="phoneUniqueMonthly">
							<el-input-number v-model.trim="state.ruleForm.phoneUniqueMonthly" placeholder="月单位" :min="0"
								controls-position="right" class="w100"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10" class="mb20">
						<el-form-item label="到量控制" prop="arrivalType">
							<el-radio-group v-model.trim="state.ruleForm.arrivalType" @change="arrivalControl">
								<el-radio :label="1">请求</el-radio>
								<el-radio :label="2">用户</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="7" :md="7" :lg="7" :xl="7" class="mb20">
						<el-form-item label="请求上限" prop="requestLimit">
							<el-input-number v-model.trim="state.ruleForm.requestLimit" placeholder="请输入上限" :min="0"
								controls-position="right" class="w100"
								:disabled="!isArrival.isArrivalControl"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="7" :md="7" :lg="7" :xl="7" class="mb20">
						<el-form-item label="用户上限" prop="userLimit">
							<el-input-number v-model.trim="state.ruleForm.userLimit" placeholder="请输入用户上限" :min="0"
								controls-position="right" class="w100"
								:disabled="isArrival.isArrivalControl"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="订购用户" prop="subscribeUser">
							<el-input-number v-model.trim="state.ruleForm.subscribeUser" placeholder="请输入订购用户" :min="0"
								controls-position="right" style="width:100%" disabled></el-input-number>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="请求次数" prop="requestTime">
							<el-input-number v-model.trim="state.ruleForm.requestTime" placeholder="请输入请求次数" :min="0"
								controls-position="right" style="width:100%" disabled></el-input-number>
						</el-form-item>
					</el-col>


					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="管控级别" prop="controlLevel">
							<el-input-number v-model.trim="state.ruleForm.controlLevel" placeholder="请输入管控级别" :min="0"
								controls-position="right" class="w100"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="排序" prop="sort">
							<el-input-number v-model.trim="state.ruleForm.sort" placeholder="请输入排序" :min="0"
								controls-position="right" class="w100"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="权重" prop="weight">
							<el-input-number v-model.trim="state.ruleForm.weight" placeholder="请输入权重" :min="0"
								controls-position="right" class="w100"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="报警用户" prop="weight">
							<el-input-number v-model.trim="state.ruleForm.alarmSubscribeUser" placeholder="请输入报警订购用户" :min="0"
								controls-position="right" class="w100"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="媒体反馈" prop="isMediaFeedback">
							<el-radio-group v-model.trim="state.ruleForm.isMediaFeedback">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="0">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="备注">
							<el-input v-model="state.ruleForm.remark" placeholder="请输入备注内容" clearable type="textarea"
								:autosize="{ minRows: 2 }" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel" size="default">取 消</el-button>
					<el-button type="primary" @click="submit" size="default">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name="editDiToucherProductPlanDaily">
import { reactive, ref } from 'vue';
import mittBus from '/@/utils/mitt';
import { optionDict } from '/@/const/dict.ts';
import { addHours, convertLocalDate, datePickerShortcuts, getNowDate } from '/@/utils/formatTime';

import { DiToucherProductPlanDaily } from '/@/api/models';
import SysDiCustomerProductApi from '/@/api/delivery/customerProduct';
import SysDiToucherProductPlanDailyApi from '/@/api/delivery/toucherProductPlanDaily';
import SysDiMediaToucherApi from '/@/api/delivery/mediaToucher';
import { ElMessage } from 'element-plus';

const shortcuts = datePickerShortcuts();
const props = defineProps({
	title: String,
});
const ruleFormRef = ref();
const state = reactive({
	DateRange: [],
	selectedProduct: undefined,
	selectedMediaToucher: undefined,
	productDict: [],
	mediaToucherDict: [],
	isShowDialog: false,
	ruleForm: {} as DiToucherProductPlanDaily,
});

// 设置默认时间
const defaultTime = ref([new Date(), new Date(0, 0, 0, 23, 59, 59)]);

// 刚进入页面给的默认当前日期
const defaultDate = getNowDate();

// 到量控制请求 & 用户 哪个可以选中并修改
let isArrival = reactive({
	isArrivalControl: true
});

// 打开弹窗
const openDialog = async (row: DiToucherProductPlanDaily) => {
	await productDictQuery();
	await mediaToucherDictQuery();
	state.selectedProduct = state.productDict.find((item) => {
		return item.value === row.productId;
	}) ?? null;
	state.selectedMediaToucher = state.mediaToucherDict.find((item) => {
		return item.value === row.mediaToucherId;
	}) ?? null;
	state.ruleForm = row;
	if (props.title === "添加") {
		state.DateRange = defaultDate;
	} else {
		state.DateRange = [row.startTime, row.endTime];
		// optionDict.operatorPlatformDict.map((item) => {
		// 	item.value == state.ruleForm.platformId ? state.ruleForm.platformId = item.label : state.ruleForm.platformId;
		// })
	}
	state.isShowDialog = true;
	if (state.ruleForm.arrivalType === 1) {
		isArrival.isArrivalControl = true;
	}else{
		isArrival.isArrivalControl = false;
	}
};

// 关闭弹窗
const closeDialog = () => {
	mittBus.emit('submitRefresh');
	state.isShowDialog = false;
	state.DateRange = [];
};

// 取消
const cancel = () => {
	state.isShowDialog = false;
};

// 提交
const submit = () => {
	optionDict.operatorPlatformDict.map((item) => {
		item.label == state.ruleForm.platformId ? state.ruleForm.platformId = item.value : state.ruleForm.platformId;
	})
	state.ruleForm.startTime = state.DateRange[0];
	state.ruleForm.endTime = state.DateRange[1];
	state.ruleForm.productId = state.selectedProduct?.value;
	state.ruleForm.platformId = state.selectedProduct?.exValue;
	state.ruleForm.mediaToucherId = state.selectedMediaToucher?.value;
	state.ruleForm.pid = state.selectedMediaToucher?.label;
	ruleFormRef.value.validate(async (valid: boolean) => {
		if (!valid) return;
		let res;
		if (state.ruleForm.id != undefined && state.ruleForm.id > 0) {
			res = await SysDiToucherProductPlanDailyApi().editPost(state.ruleForm);
		} else {
			res = await SysDiToucherProductPlanDailyApi().addPost(state.ruleForm);
		}
		if (res.data.resCode != '0000')
			ElMessage.error(res.data.resMessage);
		else {
			ElMessage.success("操作成功");
			closeDialog();
		}
		state.DateRange = [];
	});
};

// 媒体列表
const productDictQuery = async () => {
	await SysDiCustomerProductApi().queryAll({ status: 1 }).then((res) => {
		if (res.data.resCode === '0000')
			state.productDict = res.data.result ?? [];
	});
};

// 到量控制请求 & 用户 上限是否禁用
const arrivalControl = () => {
	isArrival.isArrivalControl = !isArrival.isArrivalControl;
}

// 媒体触点列表
const mediaToucherDictQuery = async () => {
	await SysDiMediaToucherApi().queryAll({ status: 1 }).then((res) => {
		if (res.data.resCode === '0000')
			state.mediaToucherDict = res.data.result ?? [];
	});
};

// 导出对象
defineExpose({ openDialog });
</script>
